<template>
	<!-- ok -->
	<view class="wanlpage-banner" :style="StyleSheet">
		<swiper class="screen-swiper square-dot" :style="{height: height}" :indicator-dots="indicatorDots" :circular="true" :autoplay="true" :interval="interval" duration="500" @change='onchange'>
			<swiper-item v-for="(image, keys) in banner" :key="keys" @tap="$wanlshop.on(image[link])">
				<image :src="$wanlshop.oss(image[img])" mode="aspectFill" :style="{height: height,borderRadius:borderRadius}"></image>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	export default {
		name: "WanlBanner",
		props: {
			img: {
				type: String,
				default: 'image'
			},
			link: {
				type: String,
				default: 'link'
			},
			banner: {
				type: Array,
				default: function() { 
					return []
				}
			},	
			indicatorDots:{
				type: Boolean,
				default: true
			},
			height: {
				type: String,
				default: "280rpx"
			},
			borderRadius: {
				type: String | Number,
				default: "20rpx"
			},
			interval: {
				type: String,
				default: "2800"
			},
			StyleSheet: {
				type: Object | Array,
				default: function() {
					return {
						margin: "25rpx 30rpx"
					}
				}
			},
			pageData: {
				type: Object,
				default: function() {
					return {
						name: "轮播组件",
						type: "banner",
						data: []
					}
				}
			}
		},
		methods:{
			onchange(e){
				this.$emit('onchange',e)
			}
		}
	}
</script>
<style lang="scss">
	.screen-swiper{
		min-height: 100rpx !important;
		image{
			overflow: hidden;
		}
	}
</style>
